<template>
    <div>
       <div class="cHeader">
         <router-link  to="All"> <img src="../assets/img/箭头.png" alt=""></router-link> 
           <span>我的账户</span>
           <div class="cHead_img">
                <img src="../assets/img/统计分析-常规统计.png" alt="" >
                <img src="../assets/img/设置.png" alt="">
           </div>
       </div>
       <div class="cBoby">
           <div>
                <p class="cHeadWord">借记卡</p>
                <div class="cAccount" v-for="(item,index) in card " :key="index" >
            <router-link to="Debitcarddetails">
                    <div class="cAccount-top">
                    <div class="cI">I类</div>
                    <p class="cNum">{{ item.hideCardNum }}</p>
                    <p >059478</p>
                    <img src="../assets/img/二维码.png" alt="" width="30px" height="30px">
                </div>
            </router-link>
                <div class="cAccount-centre">
                    <p>人民币可用余额&nbsp;&nbsp;&nbsp;</p>
                    <p class="cStar"> <span v-show="mon">{{  money1}}</span> 
                        <span v-show="mon1">{{ item.depositSum }}</span> 
                        <span @click="fun">
                        <img src="../assets/img/闭眼睛（灰色）.png" alt="" class="eye" width="30px" height="30px" v-show="eyel" >
                        <img src="../assets/img/眼睛.png" alt="" class="eye" width="30px" height="30px" v-show="!eyel"> </span>
                    </p>

                </div>
            
                <div class="cAccount-bottom">
               <router-link to="detail"> <p>查询明细</p></router-link>    
                    <span>|</span>
                <router-link to="Transfer"><p>我要转账</p></router-link> 
                    <span>|</span>
              <p>我要理财</p>
                </div>
            </div>
                <div class="cTail">
                <p>+</p>
                <p>开通电子账户</p>
                </div>
           </div>
            
       </div>
    </div>
</template>

<script>
import {debitcard } from "../api/DebitCard";
import { Dialog } from "vant";
export default {
    data(){
        return{
            card:[],
            money:"",
            money1:"******",
            mon:true,
            mon1:false,
            eyel:true
            
        }
        
    },
    
    created(){
        this.applyy()
        
    },
    methods:{
        //渲染卡片
        applyy(){
            console.log(11);
            debitcard().then((res)=>{
                if (res.code == 200 ) {
                    this.card=res.data 
                }else{
                    Dialog({ title: "温馨提示", message: res.msg });
                }
                
            }).catch((err)=>{
                console.log(err);
            })
        },
        fun(){
            this.eyel = !this.eyel;
            if(this.eyel == true){
                this.mon=true;
                this.mon1=false;
            }else{
                this.mon=false;
                this.mon1=true;
            }
        }
    }
}
</script>

<style src="../assets/css/DebitCard.css">

</style>